<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="tab-panel clear">
				<p class="tab-item" @click="tab(1)" :class="searchData.type==1?'selected-item':''">
					<span>重要通知<img class="notice-tag" v-if="messageType==1" src="../../assets/images/new_notice.svg"/></span>
				</p>
				<p class="tab-item" @click="tab(2)" :class="searchData.type==2?'selected-item':''">
					<span>电信<img class="notice-tag" v-if="messageType==2" src="../../assets/images/new_notice.svg"/></span>
				</p>
				<p class="tab-item" @click="tab(4)" :class="searchData.type==4?'selected-item':''">
					<span>联通<img class="notice-tag" v-if="messageType==4" src="../../assets/images/new_notice.svg"/></span>
				</p>
				<p class="tab-item" @click="tab(3)" :class="searchData.type==3?'selected-item':''">
					<span>移动<img class="notice-tag" v-if="messageType==3" src="../../assets/images/new_notice.svg"/></span>
				</p>
			</div>

			<div class="notice-list">
				<div class="notice-block" v-for="(item,index) in list">
					<div class="notice-head flex flex-justify-between flex-align-center">
						<div class="flex flex-align-center">
							<i class="iconfont icon-gonggao"></i>
							<span class="notice-title">{{item.title}}</span>
						</div>
						<span class="notice-time">发布时间：{{item.send_time}}</span>
					</div>
					<div class="notice-item">
						<div class="notice-other">
							<template v-if="item.type==1">
								<p v-if="item.merchant" class="notice-other-item">
									<span>运营商：</span>
									<span>{{item.merchant==1?'电信':item.merchant==2?'移动':'联通'}}</span>
								</p>
								<p v-if="item.noticecategory" class="notice-other-item">
									<span>通知类别：</span>
									<span>{{item.noticecategory==0?'操作功能':item.noticecategory==1?'营销数据':'其他'}}</span>
								</p>
								<p v-if="item.province" class="notice-other-item">
									<span>省份：</span>
									<span>{{item.province}}</span>
								</p>
							</template>
							<template v-else>
								<template v-if="item.conditionopt==0">
									<p v-if="item.stopprovince" class="notice-other-item">
										<span>暂停省份：</span>
										<span>{{item.stopprovince}}</span>
									</p>
									<p v-if="item.recoverprovince" class="notice-other-item">
										<span>恢复省份：</span>
										<span>{{item.recoverprovince}}</span>
									</p>
								</template>
								<template v-if="item.conditionopt==1">
									<p v-if="item.msg" class="notice-other-item">
										<span>短信：</span>
										<span>{{item.msg}}</span>
									</p>
									<p v-if="item.newphone" class="notice-other-item">
										<span>电话：</span>
										<span>{{item.newphone}}</span>
									</p>
								</template>
								<template v-if="item.conditionopt==2">
									<p v-if="item.openfeeprovince" class="notice-other-item">
										<span>开通省份：</span>
										<span>{{item.openfeeprovince}}</span>
									</p>
									<p v-if="item.functionfee" class="notice-other-item">
										<span>功能费：</span>
										<span>{{item.functionfee}}</span>
									</p>
									<p v-if="item.monthfee" class="notice-other-item">
										<span>包月费：</span>
										<span>{{item.monthfee}}</span>
									</p>
								</template>
							</template>
						</div>
						<div class="notice-wrap" :style="item.open?'height:'+item.height+'px;':'height:24px;'">
							<span class="notice-body-title">公告内容：</span>
							<div class="notice-body" :class="item.open?'':'close'" v-html="item.content"></div>
							<div class="notice-inner" :ref="'notice'+index">
								<div class="notice-body" v-html="item.content"></div>
							</div>
							<template v-if="item.height>24">
								<p v-if="!item.open" @click="item.open=true" class="notice-operate flex flex-align-center">
									<img :src="spread" class="operate-icon" /> 展开
								</p>
								<p v-if="item.open" @click="item.open=false" class="notice-operate flex flex-align-center">
									<img :src="close" class="operate-icon" /> 收起
								</p>
							</template>
						</div>
					</div>

				</div>
				<no-data v-if="!loading&&!list.length"></no-data>
			</div>
			<el-pagination v-if="!loading&&list.length" :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
			</el-pagination>
		</div>
		<!--<canvas ref="glCanvas" :width="width * pixelRatio" :height="height * pixelRatio"></canvas>
		<VueGlTransition :canvas="canvas" :name="name" :from="from" :to="to" :progress.sync="progress" :duration="duration" :defaultParams="{ depth: 2, perspective: 0.4, reflection: 1 }" />-->
	</div>
</template>

<script>
	import NoData from '@/components/NoData'
	import spread from '@/assets/images/icon_spread.png'
	import close from '@/assets/images/icon_close.png'
	//	import VueGlTransitions from 'vue-gl-transitions'
	export default {
		name: 'Notice',
		components: {
			NoData,
			//			VueGlTransitions,
		},
		data() {
			return {
				spread,
				close,

				loading: false,
				totalCount: 0,
				searchData: {
					pagenow: 1,
					shownum: 5,
					type: 1,
					producttypeid: 23,
					noticetype: 2,
					name: '',
				},
				list: [],
			}
		},
		computed: {
			messageType() {
				return this.$store.state.messageType
			}
		},
		mounted() {
			this.canvas = this.$refs.glCanvas;
			if(this.searchData.type == this.messageType) {
				this.$store.commit('setMessageType', '')
				this.$store.commit('setMessageProduct', '')
			}
			this.getData()
		},
		methods: {
			tab(index) {
				if(this.searchData.type != index) {
					this.searchData.type = index
					this.search()
					if(this.searchData.type == this.messageType) {
						this.$store.commit('setMessageType', '')
						this.$store.commit('setMessageProduct', '')
					}
				}
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow = 1
				this.getData()
			},
			getData() {
				this.loading = true
				this.$request.queryNoticeList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							var list = res.noticeList
							var ids = []
							list.forEach(item => {
								item.open = true
								item.height = 0
								ids.push(item.businessnotice_id)
							})
							this.list = list
							//获取消息列表后直接把消息标记为已读
							this.$request.closeNotice({
								noticeids: ids.join(',')
							}).then(res => {

							})
							this.totalCount = res.page.totalresult
							this.$nextTick(() => {
								this.list.forEach((item, index) => {
									item.height = this.$refs['notice' + index][0].offsetHeight
								})
							})
							setTimeout(()=>{
								this.list.forEach((item, index) => {
									item.height = this.$refs['notice' + index][0].offsetHeight
								})
							},100);
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
					})
			},

		}
	}
</script>

<style scoped lang="scss">
	.tab-panel {
		background: #fff;
		height: 50px;
		border-bottom: 1px solid #ddd;
		padding-top: 10px;
		.tab-item {
			height: 40px;
		    line-height: 38px;
		    padding: 0 18px;
		    background: #F0F0F0;
		    color: #999;
		    border: 1px solid #ddd;
		    cursor: pointer;
		    float:left;
			span {
				position: relative;
			}
			.notice-tag {
				width: 32px;
				height: 16px;
				position: absolute;
				right: -32px;
				top: -8px;
			}
		}
		.selected-item {
			border-top: 2px solid #0088EA;
		    background: #fff;
		    line-height: 34px;
		    color: #0088EA;
		    border-bottom: none !important;
		}
	}
	
	.notice-list {
		min-height: 500px;
		.notice-block {
			width: 100%;
			padding: 0 20px;
			border-bottom: 4px solid #f5f5f5;
			.notice-head {
				height: 64px;
				border-bottom: 1px solid #EEEEEE;
				padding: 0 10px;
				.icon-gonggao {
					color: rgb(243, 152, 0);
					font-size: 20px;
					margin-right: 6px;
				}
				.notice-title {
					font-size: 16px;
					font-weight: bold;
				}
				.notice-time {
					margin-left: 29px;
					font-size: 14px;
					color: #999;
				}
			}
			.notice-item {
				padding: 18px 0;
				.notice-other-item {
					line-height: 24px;
					font-size: 14px;
					overflow: hidden;
					span {
						float: left;
					}
					span:nth-child(1) {
						font-weight: bold;
						width: 70px;
						text-align: right;
					}
				}
			}
			.notice-wrap {
				overflow: hidden;
				position: relative;
				transition: all .3s;
				.notice-body-title {
					position: absolute;
					height: 24px;
					width: 70px;
					font-size: 14px;
					font-weight: bold;
					line-height: 24px;
				}
				.notice-operate {
					color: #0088EA;
					font-size: 14px;
					cursor: pointer;
					position: absolute;
					right: 0px;
					bottom: 2px;
					.operate-icon {
						width: 12px;
						height: 13px;
						margin-right: 6px;
					}
				}
				.notice-body {
					line-height: 24px;
					padding: 0 50px 0 70px;
					font-size: 14px;
				}
				.close {
					>>>* {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.notice-inner {
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
					visibility: hidden;
				}
			}
		}
		.el-pagination {
			padding: 20px 0;
		}
	}
</style>